<template>
  <div class="grid-container">
    <draggable
      v-model="myArray"
      chosen-class="chosen"
      force-fallback="true"
      group="people"
      animation="1000"
      @start="onStart"
      @end="onEnd"
    >
      <span v-for="element in myArray" :key="element.id" :class="'item' + ' ' + 'item-' + element.name">
        {{ element.name }}
      </span>
    </draggable>
  </div>
</template>
<script>
// 导入draggable组件
import draggable from 'vuedraggable';
export default {
  // 注册draggable组件
  components: {
    draggable
  },
  data() {
    return {
      drag: false,
      // 定义要被拖拽对象的数组
      myArray: [
        { people: 'cn', id: 1, name: '1' },
        { people: 'cn', id: 2, name: '2' },
        { people: 'cn', id: 3, name: '3' },
        { people: 'cn', id: 4, name: '4' },
        { people: 'cn', id: 5, name: '5' },
        { people: 'cn', id: 6, name: '6' },
        { people: 'cn', id: 7, name: '7' },
        { people: 'cn', id: 8, name: '8' },
        { people: 'cn', id: 9, name: '9' }
      ]
    };
  },
  methods: {
    // 开始拖拽事件
    onStart() {
      this.drag = true;
    },
    // 拖拽结束事件
    onEnd() {
      this.drag = false;
    }
  }
};
</script>
<style lang="less" scoped>
.grid-container {
}
.item {
  display: inline-block;
  width: 100%;
  font-size: 1.2em;
  text-align: center;
  line-height:60px;
  border: 1px solid #e5e4e9;
  cursor: move;
}
.item-1 {
  background-color: #ef342a;
}
.item-2 {
  background-color: #f68f26;
}
.item-3 {
  background-color: #4ba946;
}
.item-4 {
  background-color: #0376c2;
}
.item-5 {
  background-color: #c077af;
}
.item-6 {
  background-color: #f8d29d;
}
.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

.chosen {
  border: solid 2px #3089dc !important;
}
</style>
